<html>

<head>
    <meta charset="utf-8">
    <title>数组的参数</title>
</head>

<body>
    <div id="app"></div>
    <script src="react/react.js"></script>
    <script src="react/JSXTransformer.js"></script>

    <!--
    1. state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。
        这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

    2. 通过组件类的 defaultProps 属性为 props 设置默认值

    3. Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。
        当向 props 传入无效数据时，JavaScript 控制台会抛出警告。
    -->

    <script type="text/jsx">
		var MessageBox = React.createClass({
			getInitialState:function(){
				return {
					subMessages:[
						'我会代码搬砖',
						'以及花式搬砖',
						'不说了，工头叫我回去搬砖了。。。。。。',
					]
				}
			},
			render:function(){	

				return ( 
					<div>
						<h1>{this.props.title}</h1> 
						<Submessage messages={this.state.subMessages} />
					</div>
				)
			}
		});

		var Submessage = React.createClass({
			propTypes:{
				messages: React.PropTypes.array.isRequired,
			},
			getDefaultProps:function(){
				return {
					messages: ['默认的子消息'],
				}
			},
			render:function(){
				var msgs = [];
				this.props.messages.forEach(function(msg, index){
					msgs.push(
						<p>码农说： {msg}</p>
					)
				});

				return (
					<div>{msgs}</div>
				)
			}
		});

		var title = '你好世界（来自props哦）';

		var messageBox = React.render(
		    <MessageBox title={title}/>,
			document.getElementById('app')
		)


	</script>


</body>

</html>